<template>
	<view class="currentPage">
		<navbar title='联系人'></navbar>
		<view class="" style="background-color: #FFFFFF;padding: 5rpx 0;">
			<search type='contacts'></search>
		</view>
		<view class="op-list">
			<view class="op-item" @click="topendingList">
				<view>新朋友</view>
				<view class="num" v-show="pendingList.length > 0">
					{{pendingList.length > 100 ? '99+' :pendingList.length }}
				</view>
			</view>
			<view class="op-item">
				<view>标签</view>
				<view></view>
			</view>
		</view>
		<u-index-list :scrollTop="scrollTop" :offset-top='(phoneInfo.statusBarHeight + 10)*2 + 90'
			:indexList='indexList'>
			<view v-for="(item, key) in friendList" :key="key" style="background-color: #FFFFFF;">
				<u-index-anchor :index="key"></u-index-anchor>
				<view class="list-item" v-for="(friend,index) in item" @click="toChat(friend)">
					<view class="left">
						<view class="avatar">
							<image :src="friend.avatar" mode=""></image>
						</view>
						<view class="user-msg">
							<view class="user">{{friend.nickName || friend.user}}</view>
						</view>
					</view>
					<view class="right">
						<view class="online">{{friend.online?'在线':'离线'}}</view>
					</view>
				</view>

			</view>
		</u-index-list>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import search from "@/components/search.vue"
	export default {
		components: {
			search
		},
		data() {
			return {
				scrollTop: 0,
				search: "",
				show: false,
				pendingList: [],
				friendList: [],
				indexList: []

			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			phoneInfo() {
				return this.$store.state.phoneInfo
			}
		},
		filters: {
			noMail(val) {
				if (val && val.includes(' @')) {
					return val.split('@')[0]
				} else {
					return val
				}
			}
		},
		onLoad(e) {},
		onShow() { //
			this.$api.my_friend().then(res => {
				console.log('我的好友列表', res.data)
				let data = res.data
				this.pendingList = data.pending
				this.friendList = data.friendList[0]
				this.indexList = Object.keys(this.friendList)
				console.log(this.friendList)
			})
		},
		methods: {
			toChat(item) {
				console.log(item)
				uni.navigateTo({
					url: `../privateChatRoom/privateChatRoom?receiverId=${item.id}&receiver=${item.user}&nickName=${item.nickName}`,
					fail: (err) => {
						console.log(err)
					}
				})

			},
			//跳转待通过好友列表
			topendingList() {
				uni.navigateTo({
					url: `../pendingList/pendingList?pendingList=${JSON.stringify(this.pendingList)}`,
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//打开搜索页面
			openSearch() {
				this.show = true
			},
			close() {
				this.show = false
			},
			search_user() {
				console.log('添加好友')
				uni.navigateTo({
					url: '../search_user/search_user'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.currentPage {
		background: rgb(245, 246, 250);
		min-height: calc(100vh - 100rpx);
		padding-bottom: 100rpx;
		transition: all .25s linear;
	}

	.op-list {
		background-color: #FFFFFF;
		padding: 0 30rpx;

		.op-item {
			font-size: 32rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;

			.num {
				// border: 1px solid;
				font-size: 24rpx;
				border-radius: 50%;
				width: 50rpx;
				height: 50rpx;
				background-color: red;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			&:not(:last-child) {
				border-bottom: 1px solid rgba($color: gray, $alpha: .2);
			}

		}
	}

	.list-item {
		// border: 1px solid;
		padding: 20rpx 0;
		margin: 0 30rpx;
		display: flex;
		justify-content: space-between;

		&:not(:last-child) {
			border-bottom: 1px solid rgba($color: gray, $alpha: .2);
		}

		.left {
			display: flex;
			align-items: center;

			.avatar {
				image {
					height: 100rpx;
					width: 100rpx;
					border-radius: 10rpx;
				}
			}

			.user-msg {
				margin-left: 30rpx;
				font-size: 34rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.online {
				margin-right: 30rpx;
			}
		}

	}

	.search {
		background-color: #F4F4F5;
		padding: 10rpx 0;
		width: 92%;
		border-radius: 25rpx;
		margin: 20rpx auto;
		text-align: center;

	}

	.wrapper {
		width: 92%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.u-popup {

		.popup-content {
			width: 100%;
			background-color: #FFFFFF;

			// border: 10px solid red;
			.content-search {
				display: flex;

				input {
					background-color: #F4F4F5;
					height: 40rpx;
					padding: 15rpx 0;
					width: 600rpx;
					border-radius: 35rpx;
					margin: 20rpx;
					text-indent: 30rpx;
					font-size: 30rpx;
				}

				.btn {
					padding: 15rpx;
					height: 70rpx;
					// border: 1px solid;
					font-size: 30rpx;
					margin: 20rpx 0;
					color: #2B85E4;
				}
			}

		}
	}

	.wrapper {
		// background-color: #FFFFFF;
		// min-height: 100vh;
	}

	.content {
		// width: 92%;
		// margin: 0 auto;
	}

	.no-pass {
		display: flex;
		// border: 1px solid;
		padding: 15rpx 30rpx;
		justify-content: space-between;
		background: #FFFFFF;

	}

	.friend_list {
		// padding: 10rpx;

		// border: 1px solid;
		// background-color: #FFFFFF;
		.title {
			padding: 25rpx 30rpx;
		}

		.item {
			padding: 30rpx 0;
			margin: 10rpx 0;
			background: #FFFFFF;
			// border: 1px solid;
			font-size: 30rpx;

			&:not(:last-of-type) {
				border-bottom: 1px solid rgba(128, 128, 128, .4);
			}

			.wrapper {
				display: flex;
				align-items: center;

				.avatar {
					display: flex;
					align-items: center;

					image {
						height: 80rpx;
						width: 80rpx;
						border-radius: 50%;
						margin-right: 15rpx;
					}
				}
			}

		}

	}
</style>
